<template>
  <el-dialog 
  title="编辑文章"
  size="small"
  @close="close"
  :visible.sync="isVisible">
    <div>
      <label class="labelBox">
        标题
        <el-input v-model="newData.title"
          placeholder="请输入内容"
          class="inputStyle">
        </el-input>
      </label>
      <label class="labelBox">
        作者
        <el-input
          v-model="newData.author"
          class="littleStyle">
        </el-input>
      </label>
      <label class="labelBox">
        标签
        <el-select 
          v-model="newData.tagsId"
          @change="checkTags"
          multiple placeholder="请选择不超过3个标签"
          class="littleStyle">
          <el-option
            v-for="item in tags"
            :key="item.id"
            :label="item.tagName"
            :value="item.id">
          </el-option>
        </el-select>
      </label>
      <label class="labelArea">
        摘要
        <el-input
          type="textarea"
          class="littleStyle" 
          :rows="4"
          placeholder="请输入内容"
          v-model="newData.summary">
        </el-input>
      </label>
    </div>
    <vue-editor v-model="newData.content"></vue-editor>
    <el-button type="info" @click="sendNews" class="sendBtn">完成编辑</el-button>
  </el-dialog>
</template>

<script>
  import { VueEditor } from 'vue2-editor'
  import {mapActions, mapGetters} from 'vuex'
  export default {
    name: 'ArticalDialog',
    props: ['visible', 'textData'],
    data () {
      return {
        isVisible: false,
        newData: {}
      }
    },
    computed: {
      ...mapGetters([
        'tags'
      ])
    },
    watch: {
      visible (val) {
        this.isVisible = val
      },
      textData (val) {
        let arDetail = JSON.parse(JSON.stringify(val))
        // console.log(arDetail)
        this.newData = arDetail
      }
    },
    methods: {
      ...mapActions([
        'updateNews'
      ]),
      checkTags (val) {
        if (val.length > 3) {
          this.$message.error('标签不能超过3个，请重新选择')
          this.newData.tags = []
        }
      },
      close () {
        this.$emit('close')
      },
      sendNews () {
        this.$store.dispatch('updateNews', this.newData)
          .then(() => {
            this.$emit('close')
          })
      }
    },
    components: {
      VueEditor
    }
  }
</script>

<style lang="stylus" scoped>
  h3
    width: 100%
    line-height: 50px
    background: #e5e5e5
    padding-left: 20px
    box-sizing: border-box
  .imgBox
    padding: 20px
  .tips
    display: inline-block
    margin-left: 20px
    color: #ccc
  .labelArea
    display: flex
    justify-content: flex-start
    align-items: center
    box-sizing: border-box
    padding: 20px
    width: 80%
    .littleStyle
      width: 80%
      margin: 0 10px
  .labelBox
    display: flex
    justify-content: flex-start
    align-items: center
    box-sizing: border-box
    padding: 20px
    width: 80%
    height: 60px
    .inputStyle
      width: 80%
      margin-left: 10px
    .littleStyle
      width: 40%
      margin: 0 10px
  .sendBtn
    float: right
    margin: 20px
</style>
